<!-- home -->
<template>
  <div class="index-container">
    <div class="warpper">
      <Cell value="欢迎您">
        <template #title>
          <van-image
            round
            width="50"
            height="50"
            :src="$store.state.app.userInfo.headImage"
          />
          <span class="custom-title">{{$store.state.app.userInfo.nickName}}</span>
          <span v-if="$store.state.app.userInfo.status === 0" style="color: #ee0a24">(已禁用)</span>
        </template>
      </Cell>
      <Grid :column-num="3" >
        <Grid-item @click="()=>{
          if($store.state.app.userInfo.status === 0){
            this.forbidden()
            return
          }
          if(!hasCard) this.$router.push('/order')
          else this.showInfo = true
        }">
          <van-image :src="img_order" width="40" height="40"/>
          <span class="grid-span">流量订购</span>
        </Grid-item>
        <Grid-item @click="()=>{
          if($store.state.app.userInfo.status === 0){
            this.forbidden()
            return
          }
          if(!hasCard) this.$router.push('/order/search')
          else this.showInfo = true
        }">
          <van-image :src="img_search" width="40" height="40"/>
          <span class="grid-span">流量查询</span>
        </Grid-item>
        <Grid-item @click="()=>{
          if($store.state.app.userInfo.status === 0){
            this.forbidden()
            return
          }
            if(!hasCard) this.$router.push('/realNameList')
            else this.showInfo = true
          }">
          <van-image :src="img_role" width="40" height="40"/>
          <span class="grid-span">电信实名</span>
        </Grid-item>
        <Grid-item @click="()=>{
          if($store.state.app.userInfo.status === 0){
            this.forbidden()
            return
          }
          if(!hasCard) this.$router.push('/sim')
            else this.showInfo = true
        }">
          <van-image :src="img_card" width="40" height="40"/>
          <span class="grid-span">SIM卡管理</span>
        </Grid-item>
        <Grid-item @click="()=>{
          if($store.state.app.userInfo.status === 0){
            this.forbidden()
            return
          }
          if(!hasCard) this.$router.push('/bill')
            else this.showInfo = true
        }">
          <van-image :src="img_bill" width="40" height="40"/>
          <span class="grid-span">余额充值</span>
        </Grid-item>
      </Grid>
    </div>
    <CellGroup inset style="margin-top: 20px">
      <Cell title="使用指引"/>
      <Cell label="准备好卡片ICCID号">
        <template #title>
          <Badge :content="1" color="#07c160"/>
          <span class="custom-title">添加SIM卡</span>
        </template>
      </Cell>
      <Cell label="准备好身份证，SIM卡认证后才可使用">
        <template #title>
          <Badge :content="2" color="#07c160"/>
          <span class="custom-title">完成卡的实名认证</span>
        </template>
      </Cell>
      <Cell label="完成首充后才可使用，首充后将赠送大额度体验流量">
        <template #title>
          <Badge :content="3" color="#07c160"/>
          <span class="custom-title">完成首次充值</span>
        </template>
      </Cell>
      <Cell label="根据需求订购套餐">
        <template #title>
          <Badge :content="4" color="#07c160"/>
          <span class="custom-title">订购流量套餐</span>
        </template>
      </Cell>
      <Cell label="查看套餐及当前用量">
        <template #title>
          <Badge :content="5" color="#07c160"/>
          <span class="custom-title">流量用量查询</span>
        </template>
      </Cell>
    </CellGroup>
    <van-dialog
      v-model="showDialog"
      @confirm="()=>{
        $router.push('/sim/add')
      }"
      title="使用指引" confirmButtonText="添加SIM卡" showCancelButton cancelButtonText="关闭" confirmButtonColor='#1989fa'>
      <div style="width: 80%;margin: 0 auto;">
        <Cell label="准备好卡片ICCID号">
          <template #title>
            <Badge :content="1" color="#07c160"/>
            <span class="custom-title">添加SIM卡</span>
          </template>
        </Cell>
        <Cell label="准备好身份证，SIM卡认证后才可使用">
          <template #title>
            <Badge :content="2" color="#07c160"/>
            <span class="custom-title">完成卡的实名认证</span>
          </template>
        </Cell>
        <Cell label="完成首充后才可使用，首充后将赠送大额度体验流量">
          <template #title>
            <Badge :content="3" color="#07c160"/>
            <span class="custom-title">完成首次充值</span>
          </template>
        </Cell>
        <Cell label="根据需求订购套餐">
          <template #title>
            <Badge :content="4" color="#07c160"/>
            <span class="custom-title">订购流量套餐</span>
          </template>
        </Cell>
        <Cell label="查看套餐及当前用量">
          <template #title>
            <Badge :content="5" color="#07c160"/>
            <span class="custom-title">流量用量查询</span>
          </template>
        </Cell>
      </div>
    </van-dialog>
    <van-dialog v-model="showInfo" title="提示" @confirm="()=>{
      $router.push('/sim/add')
    }" confirmButtonText="立即添加" confirmButtonColor='#1989fa'>
      <div class="tips dialog-tips">
        <span>您还没有卡片，需要先添加卡片</span>
        <span>即将前往</span>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import img_role from '../../assets/img/role.svg'
  import img_search from '../../assets/img/search.svg'
  import img_order from '../../assets/img/order.svg'
  import img_card from '../../assets/img/card.svg'
  import img_bill from '../../assets/img/bill.svg'
  import {
    Grid,
    GridItem,
    Cell,
    CellGroup,
    Image as VanImage,
    Dialog,
    Step as VanStep,
    Steps as VanSteps,
    Badge
  } from 'vant';
  import {getUserInfo} from "../../api/home";
  import {getCardList} from "../../api/user";
  // wx.config({
  //   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  //   appId: 'wx9fbc42f016b201ea', // 必填，公众号的唯一标识
  //   timestamp: new Date().getTime(), // 必填，生成签名的时间戳
  //   nonceStr: 'dxy', // 必填，生成签名的随机串
  //   signature: 'f63cff02100bcea95960d067d9ed26b3',// 必填，签名
  //   jsApiList: [] // 必填，需要使用的JS接口列表
  // });
  export default {
    components: {
      Grid,
      GridItem,
      Cell,
      CellGroup,
      VanImage,
      [Dialog.Component.name]: Dialog.Component,
      VanStep,
      VanSteps,
      Badge
    },
    data() {
      return {
        showDialog: false,
        headImage: '',
        userName: '',
        img_role: img_role,
        img_order: img_order,
        img_search: img_search,
        img_card: img_card,
        img_bill: img_bill,
        clientId: '',
        hasCard: false,
        showInfo: false
      }
    },
    computed: {},
    mounted() {
      this.getCardList()
      if (!this.$store.state.app.userInfo.nickName)
        this.getUserInfo()
    },
    beforeMount() {
      // todo 授权
      // 1、url 中是否有token
      let href = location.href
      let query = href.split('?')[1]
      let urlSearch = new URLSearchParams(query)
      console.log(urlSearch.get('token'))
      if (urlSearch.has('token')) {
        sessionStorage.setItem('token', urlSearch.get('token'))
      }
    },
    watch: {
      clientId() {
        this.getCardList()
      }
    },
    methods: {
      getUserInfo() {
        getUserInfo().then(res => {
          // this.headImage = res.data.headImage
          // this.userName = res.data.nickName
          this.clientId = res.data.clientId
          this.$store.dispatch('setUserInfo', res.data)
          localStorage.setItem('agentId', res.data.agentId)
          console.log(this.$store)
        })
      },
      getCardList() {
        getCardList(this.clientId).then(res => {
          if (res.data.length === 0) {
            this.hasCard = true
            this.showDialog = true
          }
        })
      },
      forbidden() {
        Dialog.alert({
          title: '提示',
          message: '请联系管理员解除禁用',
        }).then(() => {
          // on close
        });
      }
    }
  }
</script>
<style lang="scss">
  .warpper {
    ::v-deep .van-cell__title, .van-cell__value {
      display: flex;
      align-items: center;
    }

    .van-cell__value {
      justify-content: flex-end;
    }

    .custom-title {
      margin-left: 10px;
    }

    .grid-span {
      margin-top: 5px;
      color: #323233;
    }
  }
</style>
<style lang="scss" scoped>
  .index-container {
    .warpper {
      /*padding: 12px;*/
      background: #fff;

      .demo-home__title {
        margin: 0 0 6px;
        font-size: 32px;

        .demo-home__title img,
        .demo-home__title span {
          display: inline-block;
          vertical-align: middle;
        }

        img {
          width: 32px;
        }

        span {
          margin-left: 16px;
          font-weight: 500;
        }
      }

      .demo-home__desc {
        margin: 0 0 20px;
        color: rgba(69, 90, 100, 0.6);
        font-size: 14px;
      }
    }
  }

  .tips {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    color: #969799;
  }

  .dialog-tips {
    font-size: 14px;
    color: #969799;
    /*padding: 0 20px 30px;*/
    text-align: center;
  }
</style>
